<template>
  <div class="receiver-info">
    <div class="header">
      <div class="title">收货信息</div>
      <div class="actions">
        <el-button v-if="!isEditing" type="primary" size="small" @click="startEdit">编辑</el-button>
        <template v-else>
          <el-button type="primary" size="small" @click="saveChanges">保存</el-button>
          <el-button size="small" @click="cancelEdit">取消</el-button>
        </template>
      </div>
    </div>
    <el-form 
      ref="form" 
      :model="formData" 
      :disabled="!isEditing"
      label-width="100px"
      size="small"
      :rules="rules"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="收货人" prop="receiver">
            <el-input v-if="isEditing" v-model="formData.receiver" placeholder="请输入收货人"></el-input>
            <span v-else>{{ formData.receiver }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮政编码" prop="postalCode">
            <el-input v-if="isEditing" v-model="formData.postalCode" placeholder="请输入邮政编码"></el-input>
            <span v-else>{{ formData.postalCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货电话" prop="phone">
            <el-input v-if="isEditing" v-model="formData.phone" placeholder="请输入收货电话"></el-input>
            <span v-else>{{ formData.phone }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="收货手机" prop="mobile">
            <el-input v-if="isEditing" v-model="formData.mobile" placeholder="请输入收货手机"></el-input>
            <span v-else>{{ formData.mobile }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证" prop="idCard">
            <el-input v-if="isEditing" v-model="formData.idCard" placeholder="请输入身份证"></el-input>
            <span v-else>{{ formData.idCard }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-if="isEditing" v-model="formData.realName" placeholder="请输入真实姓名"></el-input>
            <span v-else>{{ formData.realName }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-if="isEditing" v-model="formData.email" placeholder="请输入电子邮箱"></el-input>
            <span v-else>{{ formData.email }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="地区信息" prop="region">
            <el-input v-if="isEditing" v-model="formData.region" placeholder="请输入地区信息"></el-input>
            <span v-else>{{ formData.region }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="收货地址" prop="address">
            <el-input 
              v-if="isEditing"
              v-model="formData.address" 
              type="textarea" 
              :rows="2"
              placeholder="请输入收货地址"
            ></el-input>
            <span v-else>{{ formData.address }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'ReceiverInfo',
  props: {
    deliveryOrderId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      isEditing: false,
      formData: {
        receiver: '',
        postalCode: '',
        phone: '',
        mobile: '',
        idCard: '',
        realName: '',
        email: '',
        region: '',
        address: ''
      },
      // 保存原始数据用于取消编辑
      originalData: null,
      rules: {
        receiver: [{ required: true, message: '请输入收货人', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入收货手机', trigger: 'blur' }],
        address: [{ required: true, message: '请输入收货地址', trigger: 'blur' }]
      }
    }
  },
  watch: {
    deliveryOrderId: {
      handler(val) {
        if (val) {
          this.getReceiverInfo()
        }
      },
      immediate: true
    }
  },
  methods: {
    // 获取收货信息
    getReceiverInfo() {
      // TODO: 调用获取收货信息接口
      // getReceiverInfo(this.deliveryOrderId).then(res => {
      //   this.formData = res.data
      //   this.originalData = JSON.parse(JSON.stringify(res.data))
      // })

      // 模拟数据
      const mockData = {
        receiver: '蒋**',
        postalCode: '',
        phone: '',
        mobile: '********3998',
        idCard: '',
        realName: '',
        email: '',
        region: '江苏省-泰州市-泰兴市',
        address: '江苏省 泰州市 泰兴市 深川**路*********************'
      }
      this.formData = mockData
      this.originalData = JSON.parse(JSON.stringify(mockData))
    },

    // 开始编辑
    startEdit() {
      this.isEditing = true
      this.originalData = JSON.parse(JSON.stringify(this.formData))
    },

    // 保存更改
    saveChanges() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // TODO: 调用保存接口
          // updateReceiverInfo(this.deliveryOrderId, this.formData).then(() => {
          //   this.isEditing = false
          //   this.$message.success('保存成功')
          // })

          // 模拟保存
          this.isEditing = false
          this.$message.success('保存成功')
        }
      })
    },

    // 取消编辑
    cancelEdit() {
      this.formData = JSON.parse(JSON.stringify(this.originalData))
      this.isEditing = false
    }
  }
}
</script>

<style lang="scss" scoped>
.receiver-info {
  padding: 20px;
  background: #fff;
  border-radius: 4px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .title {
      font-size: 16px;
      font-weight: bold;
    }
  }

  :deep(.el-form-item) {
    margin-bottom: 18px;
  }
}
</style>
